<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title> mpSlideBox </title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="author" content="Murat Purc, murat@purc.de" />
	<meta name="copyright" content="&copy; {%COPYRIGHT%}" />
	<meta name="description" content="mpSlideBox: A JavaScript slidebox (carousel like) based on Prototype &amp; script.aculo.us." />
	<meta name="keywords" content="mpSlideBox, Slidebox, Slide box, JavaScript, Carousel, Prototype, script.aculo.us" />
    <script src="./js/scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript"></script>
    <script src="./js/scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script>
    <script src="./js/mpSlideBox.js" type="text/javascript"></script>
    <link href="./mpSlideBox.css" rel="stylesheet" type="text/css" media="screen" />
    <style type="text/css">/* <![CDATA[ */
    #slideBox {position:relative;width:500px;height:250px; min-height:250px;overflow:hidden;margin-left:50px;}
    #slideBox .slideBoxItem {text-align:center;width:400px;}
    #slideBox .slideBoxItem img {display:block; margin:0 auto;}
    #slideBox .slideBoxItem p {margin:10px 0 0 0; padding:5px; background:#eaeaea;}
    /* ]]> */</style>
    <script type="text/javascript">/* <![CDATA[ */
    var slideBox;
    document.observe("dom:loaded", function(){
        slideBox = new mpSlideBox("slideBox", {
            autostart:     true,
            itemsClass:    "slideBoxItem",
            startPos:      "0",
            useItemsSizes: true,
            interval:      5,
            spacer:        0,
            duration:      1,
            direction: "random"
        });
    });
    /* ]]> */</script>
</head>

<body>

<div id="centerBox">

    <h1>Slidebox example with images</h1>

    <p>Slides several slide container with autostart and random option.</p>

    <div id="slideBox">

        <div class="slideBoxItem">
            <img src="./images/bmw_m3_cabrio/bmw_m3_convertible_01.jpg" width="400" height="300" alt="BMW M3 Cabrio - Image 1" />
        </div>

        <div class="slideBoxItem">
            <img src="./images/bmw_m3_cabrio/bmw_m3_convertible_02.jpg" width="400" height="300" alt="BMW M3 Cabrio - Image 2" />
        </div>

        <div class="slideBoxItem">
            <img src="./images/bmw_m3_cabrio/bmw_m3_convertible_03.jpg" width="400" height="300" alt="BMW M3 Cabrio - Image 3" />
        </div>

        <div class="slideBoxItem">
            <img src="./images/bmw_m3_cabrio/bmw_m3_convertible_04.jpg" width="400" height="300" alt="BMW M3 Cabrio - Image 4" />
        </div>

        <div class="slideBoxItem">
            <img src="./images/bmw_m3_cabrio/bmw_m3_convertible_05.jpg" width="400" height="300" alt="BMW M3 Cabrio - Image 5" />
        </div>

        <div class="slideBoxItem">
            <img src="./images/bmw_m3_cabrio/bmw_m3_convertible_06.jpg" width="400" height="300" alt="BMW M3 Cabrio - Image 6" />
        </div>

        <div class="slideBoxItem">
            <img src="./images/bmw_m3_cabrio/bmw_m3_convertible_07.jpg" width="400" height="300" alt="BMW M3 Cabrio - Image 7" />
        </div>

        <div class="slideBoxItem">
            <img src="./images/bmw_m3_cabrio/bmw_m3_convertible_08.jpg" width="400" height="300" alt="BMW M3 Cabrio - Image 8" />
        </div>

    </div>

    <div class="slideBoxButtons clearfix">
        <a href="javascript:void(0);" class="previous" onclick="slideBox.previous();" title="previous Item"><span>previous</span></a>
        <a href="javascript:void(0);" class="start" onclick="slideBox.start();" title="start Slide"><span>start</span></a>
        <a href="javascript:void(0);" class="stop" onclick="slideBox.stop();" title="stop Slide"><span>stop</span></a>
        <a href="javascript:void(0);" class="next last" onclick="slideBox.next();" title="next Item"><span>next</span></a>
    </div>

    <p id="footer">
        URL: <a href="http://code.google.com/p/mpslidebox/" title="Go to mpSlideBox's project page at Google code">mpSlideBox at Google code</a><br /> 
        Author: Murat Purc (<a href="http://www.purc.de/" title="Visit authors homepage">www.purc.de</a>),
        &copy; {%COPYRIGHT%}
    </p>

</div>

</body>
</html>
